<template>
    <div class="fillcontain">

        <nav-header></nav-header>

        <el-tabs type="border-card" class="common_box">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> 通用信息</span>
                
                <!-- 通用信息 -->
                <el-row>
                    <el-col :span="20">
                        
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm" style="padding: 25px 0;">
                            <el-form-item label="商品名称" prop="shopName">
                                <el-input v-model="ruleForm.shopName"></el-input>
                            </el-form-item>
                            <el-form-item label="商品简介" prop="shopDescript">
                                <el-input v-model="ruleForm.shopDescript"></el-input>
                            </el-form-item>
                            <el-form-item label="市场价格" prop="remackPrice">
                                <el-input v-model="ruleForm.remackPrice"></el-input>
                            </el-form-item>
                            <el-form-item label="本店价格" prop="ourPrice">
                                <el-input v-model="ruleForm.ourPrice"></el-input>
                            </el-form-item>
                            <el-form-item label="成本价" prop="costPrice">
                                <el-input v-model="ruleForm.costPrice"></el-input>
                            </el-form-item>
                            <el-form-item label="总库存" prop="inventory">
                                <el-input v-model="ruleForm.inventory"></el-input>
                            </el-form-item>
                            <el-form-item label="商品关键字" prop="specialWord">
                                <el-input v-model="ruleForm.specialWord"></el-input>
                            </el-form-item>
                            <el-form-item label="商品分类" prop="shopType">
                                <el-select v-model="ruleForm.region" placeholder="请选择商品分类">
                                  <el-option label="分类一" value="shanghai"></el-option>
                                  <el-option label="分类二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动时间" required>
                                <el-col :span="11">
                                    <el-form-item prop="date1">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-form-item prop="date2">
                                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="上下架" prop="onLine">
                                <el-switch v-model="ruleForm.onLine"></el-switch>
                            </el-form-item>
                            <el-form-item label="首页推荐" prop="recommended">
                                <el-switch v-model="ruleForm.recommended"></el-switch>
                            </el-form-item>
                            <el-form-item label="商品特色" prop="shopFeatures">
                                <el-checkbox-group v-model="ruleForm.shopFeatures">
                                    <el-checkbox label="7天物流有退货" name="type"></el-checkbox>
                                    <el-checkbox label="7天物流有换货" name="type"></el-checkbox>
                                    <el-checkbox label="正规发票" name="type"></el-checkbox>
                                    <el-checkbox label="正品保证" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="商品特点">
                                <el-select v-model="ruleForm.attributes" multiple placeholder="请选择">
                                    <el-option
                                        v-for="item in attributes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="特殊资源" prop="resource">
                                <el-radio-group v-model="ruleForm.resource">
                                    <el-radio label="线上品牌商赞助"></el-radio>
                                    <el-radio label="线下场地免费"></el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                            <el-form-item label="商品描述" prop="desc">
                                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">确认提交</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>

                    </el-col>
                </el-row>
                <!-- 通用信息 over -->

            </el-tab-pane>
            <el-tab-pane label="商品相册">
                
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <el-button type="primary" @click="" style="margin-top: 20px;">确认提交</el-button>

            </el-tab-pane>
            <el-tab-pane label="商品详情">
                
                <quill-editor v-model="content"
                ref="myQuillEditor"
                class="editer"
                :options="editorOption"
                @ready="onEditorReady($event)">
                </quill-editor>
                <el-button type="primary" @click="submit" style="margin-top: 90px;">提交</el-button>

            </el-tab-pane>
            <el-tab-pane label="商品模型">商品模型</el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import NavHeader from '@/components/header.vue';
import { quillEditor } from 'vue-quill-editor'

export default {
    name: 'Page',
    data() {
        return {
            /** 通用信息 **/
            ruleForm: {
                shopName: '',
                shopDescript: '',
                remackPrice: '',
                ourPrice: '',
                inventory: '', // 库存
                specialWord: '', // 关键字
                shopType: '', // 商品分类
                date1: '',
                date2: '',
                onLine: false, // 上下架
                recommended: true, // 推荐
                shopFeatures: [], // 商品特色
                attributes: [],  // 商品特点
                desc: ''
            },
            attributes: [
                {
                    value: '新',
                    label: '新品'
                },{
                    value: '招牌',
                    label: '招牌'
                }
            ],
            rules: {
                shopName: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                remackPrice: [
                    { required: true, message: '市场价不能为空'},
                    { type: 'number', message: '市场价必须为数字值'}
                ],
                ourPrice: [
                    { required: true, message: '本店价不能为空'},
                    { type: 'number', message: '本店价必须为数字值'}
                ],
                inventory: [
                    { required: true, message: '库存不能为空'},
                    { type: 'number', message: '库存必须为数字值'}
                ],
                shopType: [
                    { required: true, message: '请选择商品分类', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                shopFeatures: [
                    { type: 'array', required: true, message: '请至少选择一个商品特色', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            /** 商品相册 **/
            dialogImageUrl: '',
            dialogVisible: false,
            /** 商品详情 **/
            content: '<h3>文本编辑</h3>',
            editorOption: {
                
            }
        };
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill
        }
    },
    methods: {
        /** 通用信息 **/
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        /** 商品相册 **/
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        /** 商品详情 **/
        onEditorReady(editor) {
            console.log('editor ready!', editor)
        },
        submit(){
            console.log(this.content);
            this.$message.success('提交成功！');
        }
    },
    mounted(){
        
    },
    created () {

    },
    components: {
        NavHeader,
        quillEditor
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.common_box{
    width: 94%; margin: 20px auto;
}
</style>
